<template>
  <el-table
    v-loading="loading"
    :data="pcwDataKeysList"
    border
    height="400"
    :span-method="objectSpanMethod"
  >
    <!-- <el-table-column v-for="(item, index) in baseTit" :key="index" :width="index !== 1 ? 150 : ''" :label="$t(item)" show-overflow-tooltip>
      <template slot="header">
        <span :class="index > 1 ? 'alignRight' : ''">
          <span>{{ $t(item) }}</span>
        </span>
      </template>
      <template slot-scope="scope">
        <span v-if="index === 0">
          {{ $t(scope.row.keyReport) }}
        </span>
        <span v-if="index === 1">
          {{ $t(scope.row.keyName) }}
        </span>
        <span v-if="index > 1" class="alignRight">
          <div v-for="(map, ind) in scope.row.listMap" :key="ind">
            <div v-if="map.title === item">
              <span>{{ moneyFormat(map.keyValue) }}</span>
            </div>
          </div>
        </span>
      </template>
    </el-table-column> -->

    <el-table-column
      v-for="(item, index) in baseTit"
      :key="item.prop"
      :fixed="index < 2"
      :width="baseTit.length < 7 ? '' : '180'"
      :label="$t(item.label)"
      :prop="item.prop"
    >
      <template slot-scope="scope">
        <span v-if="index < 2">
          {{ $t(scope.row[item.prop]) }}
        </span>
        <span v-else-if="index === 2">
          <span v-if="index === 2" class="alignRight" :title="scope.row['change']['tbvTitle']">
            <span v-if="scope.row['change']['tbv'] && scope.row['change']['tbv'] !== 0">{{ moneyFormat(scope.row['change']['tbv']) }}%</span>
            <i v-if="scope.row['change']['tbv_icon'] === 'asc'" class="el-icon-top" />
            <i v-else-if="scope.row['change']['tbv_icon'] === 'desc'" class="el-icon-bottom" />
            <i v-else class="el-icon-zero">-</i>
          </span>
        </span>
        <span v-else class="alignRight">
          <span :class="scope.row[item.prop]['riskType']">{{ moneyFormat(scope.row[item.prop]['val']) }}</span>
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
  import { listGroupPcwDataKeys } from '@/api/company/pcw/pcwDataKeys'
  export default {
    name: 'PcwDataKeyInfo',
    props: {
      // 公司ID
      bussId: {
        type: String,
        required: true
      },
      dataSource: {
        type: String,
        default: 'act'
      }
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 融资历史表格数据
        companyFinanceList: [],
        // 查询参数
        queryParams: {
          companyId: this.bussId,
          dataSource: this.dataSource
        },
        // 表单参数
        form: {},
        // 表头展示
        baseTit: [],
        // 财务数据基础数据集合
        pcwDataKeysList: [],
        dataSourceOptions: [],
        xAxisData: []
      }
    },
    watch: {
      dataSource: {
        handler() {
          this.getList()
        }
      }
    },
    created() {
      this.getList()
      this.getDicts('pcw_data_source').then(response => {
        this.dataSourceOptions = response.data
      })
    },
    methods: {
      /** 查询新闻信息列表 */
      getList() {
        this.loading = true
        this.queryParams.companyId = this.bussId
        this.queryParams.dataSource = this.dataSource
        listGroupPcwDataKeys(this.queryParams).then(response => {
          this.baseTit = response.data.columns
          this.pcwDataKeysList = response.data.data
          // if (this.baseTit && this.baseTit.length > 3) {
          //   for (let i = 3; i < this.baseTit.length; i++) {
          //     // X轴坐标赋值
          //     this.xAxisData.push(this.baseTit[i].label)
          //   }
          //   // 将所有分类存放在数组中，有几个分类，就创建几张echarts表
          //   var rows = []
          //   this.pcwDataKeysList.forEach(item => {
          //     if (item.keyReport !== '' && rows.indexOf(item.keyReport) === -1) {
          //       rows.push(item.keyReport)
          //     }
          //   })
          //   this.keyReports = rows
          //   this.loading = false
          //   this.$nextTick(() => {
          //     this.initChart()
          //   })
          // }
          this.loading = false
        })
      },
      objectSpanMethod({ rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          const spanArr = this.rowspan()
          for (let i = 0; i < spanArr.length; i++) {
            const _row = spanArr[rowIndex]
            return {
              rowspan: _row,
              colspan: 1
            }
          }
        }
      },
      rowspan() {
        // 二维数组，用于存放单元格合并规则
        const spanArr = []
        // 用于存储相同项的开始index
        let position = 0
        this.pcwDataKeysList.forEach((item, index) => {
          if (index === 0) {
            spanArr.push(1)
            position = 0
          } else {
            if (this.pcwDataKeysList[index].keyReport === this.pcwDataKeysList[index - 1].keyReport) {
              spanArr[position] += 1 // 有相同项
              spanArr.push(0) // 名称相同后往数组里面加一项0
            } else {
              spanArr.push(1) // 同列的前后两行单元格不相同
              position = index
            }
          }
        })
        return spanArr
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tableTop{
    height: 38px;
    line-height: 38px;
    border-left:1px solid #dfe6ec;
    background-color: #f6f7fb;
    color: #555 !important;
    font-size: 13px;
    font-weight: bold;
    &:first-child{
      border-left:0;
    }
  }
  .pcwBaseList {
    color: #555 !important;
    font-size: 13px;
    border-top:1px solid #dfe6ec;
    height: 38px;
    line-height: 38px;
    width: 100%;
    display: flex;
    .mapRight{
      display: flex;
      .map{
        width:151px;
        padding: 0 10px;
        border-left:1px solid #dfe6ec;

      }
    }
    .tit{
      width:260px;
      padding: 0 10px;
      border-left:1px solid #dfe6ec;
    }
  }
  .flexDiv{
    display: flex;
    .one{
      width:260px;
      padding: 0 10px;
    }
    .tit{
      width:150px;
      padding: 0 10px;
    }
  }
  .key-div{
    border:1px solid #dfe6ec;
  }
  .chart-div{
    margin-bottom: 30px;
    border:1px solid #dfe6ec;
    padding: 15px;
  }
</style>
